<template>
  <el-collapse model-value="first">
    <el-collapse-item name="first" >
      <template #title>
        <SvgIcon name="setting"/>常规
      </template>
      <el-form :model="data" label-position="left" label-width="50px">
        <el-form-item label="名称:" prop="text">
          <el-input v-model="data.text"/>
        </el-form-item>
        <el-form-item label="描述:" prop="text">
          <el-input
              v-model="data.properties.description"
              :rows="2"
              type="textarea"
          />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item name="tow" >
      <template #title>
        <SvgIcon name="setting"/>网关配置
      </template>
      <el-form :model="data.properties" label-position="left" size="small" label-width="80px">
        <el-form-item label="网关条件" >
          <el-radio-group v-model="data.properties.modelRelation">
            <el-radio label="and">AND</el-radio>
            <el-radio label="or">OR</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-table :data="data.properties.modelList" size="mini" border fit>
          <el-table-column label="参数" prop="modelParam" width="100" />
          <el-table-column label="比较" prop="modelCompare" width="60" show-overflow-tooltip />
          <el-table-column label="参数值" prop="modelValue" width="80" show-overflow-tooltip />
          <el-table-column label="操作">
            <template #default="scope">
              <el-popover  placement="left">
                <template #reference>
                  <el-button size="small" type="primary" circle ><SvgIcon name="dish"/></el-button>
                </template>
                <div>
                  <el-button text type="primary" size="small" @click="openAttributesForm(scope.row, scope.$index)">
                    <SvgIcon name="elementEdit"/>
                    修改
                  </el-button>
                </div>
                <div>
                  <el-button text type="primary"  size="small" @click="removeAttributes(scope.row, scope.$index)">
                    <SvgIcon name="elementDelete"/>
                    移除
                  </el-button>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="element-drawer__button">
          <el-button size="small" type="primary" @click="openAttributesForm(null, -1)">
            <SvgIcon name="action"/>添加属性
          </el-button>
        </div>
      </el-form>
    </el-collapse-item>
  </el-collapse>


  <el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
    <el-form :model="propertyForm" label-width="80px" center>
      <el-form-item label="参数：" prop="modelParam">
        <el-select v-model="propertyForm.modelParam" placeholder="请选择参数">
          <el-option value="exclude" label="年龄"/>
          <el-option value="parallel" label="金额"/>
        </el-select>
      </el-form-item>
      <el-form-item label="比较：" prop="modelCompare">
        <el-select v-model="propertyForm.modelCompare" placeholder="请选择参数比较">
          <el-option value=">" label=">"/>
          <el-option value="<" label="<"/>
        </el-select>
      </el-form-item>
      <el-form-item label="参数值：" prop="modelValue">
        <el-input v-model="propertyForm.modelValue" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="propertyFormModelVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAttribute">编 辑</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import {ref,nextTick} from 'vue'
import { usePropertiesPanelData } from '../../useapi';
import './style.css';

const propertyList:any= ref([])
const propertyForm =ref(null)
const editingPropertyIndex = ref(0)
const propertyFormModelVisible = ref(false)


const data = usePropertiesPanelData()

const openAttributesForm = (row:any, index:number) => {
   propertyFormModelVisible.value = true;
   propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(row));
   editingPropertyIndex.value = index
}

const removeAttributes = (row:any, index:number) => {
  propertyList.value.splice(index, 1);
  data.properties.modelList = propertyList.value
  console.log(data.properties.modelList)
}

const saveAttribute = () => {
    if (editingPropertyIndex.value !== -1) {
      propertyList.value[editingPropertyIndex.value] = propertyForm.value
    } else {
      propertyList.value.push(propertyForm.value)
    }
    console.log(propertyList)
    data.properties.modelList = propertyList.value
    propertyFormModelVisible.value = false;
    console.log(data.properties.modelList)
 }
</script>
